<template>
  <el-dialog title="其他物业信息" :visible.sync="dialogVisible" width="80%" :before-close="handleClose" append-to-body>
    <div class="resource-manage">
      <div>
        <el-form class="form-wrap" label-position="top" size="small">
          <el-form-item label="其它物业名称">
            <el-col class="in_txt">{{propForm.otherProperty.otherName}}</el-col>
          </el-form-item>
          <el-form-item label="建筑面积(m²)">
            <el-col class="in_txt">{{propForm.otherProperty.buildArea}}</el-col>
          </el-form-item>
          <el-form-item label="管理所">
            <el-col class="in_txt">{{getCardTypeValue(propForm.otherProperty.manageUnit,manageUnits)}}</el-col>
          </el-form-item>
          <el-form-item label="物业地址" prop="investmentIntensity">
            <el-col
              class="in_txt"
            >{{getCardTypeValue(propForm.otherProperty.cityCode,cityAssembly)}}{{getCardTypeValue(propForm.otherProperty.countyCode,districtCollection)}}{{getCardTypeValue(propForm.otherProperty.projectStreet,streets)}}{{getCardTypeValue(propForm.otherProperty.communityName,communityNames)}}{{propForm.otherProperty.addressInfo}}</el-col>
          </el-form-item>
          <el-form-item label="地图坐标">
            <el-col class="in_txt">{{propForm.otherProperty.mapCoordinates}}</el-col>
          </el-form-item>

          <el-form-item label="地图围栏">
            <el-col class="in_txt">{{propForm.otherProperty.fenceCoordinates}}</el-col>
          </el-form-item>

          <el-form-item label="VR地址">
            <el-col class="in_txt">{{propForm.otherProperty.vrUrl}}</el-col>
          </el-form-item>

          <el-form-item label="录入人">
            <el-col class="in_txt">{{propForm.otherProperty.createName}}</el-col>
          </el-form-item>
          <el-form-item label="备注" class="full">
            <el-col class="in_txt">{{propForm.otherProperty.remarks}}</el-col>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="resource-manage">
      <div>
        <div class="card-title">附件信息</div>
        <div style="padding: 10px 20px">
          <div class="flex-c" v-for="(item, index) in fileList" :key="index">
            <div class="name mr20">{{ item.original + '(' + item.fileSize / 1024 + 'M)'}}</div>
            <div class="date mr20">{{ item.updateTime }}</div>
            <div class="btn">
              <el-button type="text" @click="handleDownload(item.fileId)">下载</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { get, getFiles, checkFiles } from '../.././other-property/api/other_property'
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'preview',
  computed: {
    ...mapState({
      // 是否内嵌页面场景
      isWebView: state => state.isWebView
    }),
    belong_ch () {
      const belongs = this.getDict('property_ownerships')
      let val = this.propForm.otherProperty.belong
      if (val && belongs.length > 0) {
        const pts = belongs.find(t => t.value == val)
        return pts ? pts.label : ''
      }
      return ''
    },
    street_ch () {
      const street = this.getDict('streets')
      let val = this.propForm.otherProperty.projectStreet
      if (val && street.length > 0) {
        const pts = street.find(t => t.value == val)
        return pts ? pts.label : ''
      }
      return ''
    },
    communityName_ch () {
      const street = this.getDict('community_names')
      let val = this.propForm.otherProperty.communityName
      if (val && street.length > 0) {
        const pts = street.find(t => t.value == val)
        return pts ? pts.label : ''
      }
      return ''
    },
    manageUnit_ch () {
      const manageUnits = this.getDict('administrative_office')
      let val = this.propForm.otherProperty.manageUnit
      if (val && manageUnits.length > 0) {
        const pts = manageUnits.find(t => t.value == val)
        return pts ? pts.label : ''
      }
      return ''
    },
    ...mapGetters({
      cityAssembly: 'getCityAssembly',
      districtCollection: 'getDistrictCollection',
    })
  },
  data () {
    return {
      dialogVisible: false,
      otherId: '',
      streets: [],
      manageUnits: [],
      landUses: [],
      communityNames: [],
      deptNames: [],
      fileList: [],
      model: 'otherProperty',

      propForm: {
        otherProperty: {
          otherId: "",
          otherName: "",
          propertyId: "",
          propertyName: "",
          projectId: "",
          projectName: "",
          buildArea: "",
          manageUnit: "",
          areaCode: "",
          areaName: "",
          projectStreet: "",
          communityName: "",
          addressInfo: "",
          mapCoordinates: "",
          vrUrl: "",
          latitude: "",
          longitude: "",
          remarks: "",
          landId: "",
          parcelNum: "",
          parcelArea: "",
          landUse: "",
          landContractNum: "",
          cityCode: "",
          countyCode: "",
          street: "",
          community: "",
          landAddressInfo: "",
          address: "",
          propertyType: "",
          useType: "",
          propertyOwnership: "",
          propertyStatus: "",
          propertySource: "",
          deptId: "",
          deptName: "",
          gatherPeople: ""
        },
      },
    }
  },
  methods: {
    handleClose (done) {
    },
    open (row) {
      this.dialogVisible = true
      const loading = this.$loading({
        lock: true,
        text: '数据加载中'
      });
      // 如果是内嵌页面预览隐藏头部和左侧菜单
      this.otherId = row.roomId
      //通过id获取项目信息
      get(this.otherId).then(rep => {
        this.propForm.otherProperty = rep.data.data
        this.propForm.otherProperty.cityCode = this.propForm.otherProperty.areaCode.split('-')[0]
        this.propForm.otherProperty.countyCode = this.propForm.otherProperty.areaCode.split('-')[1]
        loading.close()
      }).catch(e => {
        loading.close()
        this.$message({
          type: 'error',
          message: '数据获取失败!'
        })
      })
      getFiles(this.otherId, this.model).then(rep => {
        this.fileList = rep.data.data
      })

      this.manageUnits = this.getDict('administrative_office')
      this.landUses = this.getDict('land_uses')
      this.communityNames = this.getDict('community_names')
      this.streets = this.getDict('streets')
      this.deptNames = this.getDict("budget_department")
    },

    handleDownload (fileId) {
      checkFiles(fileId).then(resp => {
        if (resp.data.code === 0) {
          window.open('/admin/sys-file/download/' + fileId)
        } else {
          this.$message({
            message: `文件不存在！`,
            type: 'warning'
          })
        }
      })
    },
    getCardTypeValue (num, sum) {
      let arr = sum.filter(e => e.value === num)
      if (arr.length > 0) {
        return arr[0].label
      } else {
        return num
      }
    }
  }

};
</script>

<style lang="scss" scoped>
.in_txt {
  color: #999999;
}
.card-box {
  padding: 16px 32px;
  margin: 24px;
  overflow: hidden;
  .btn {
    float: right;
  }
}
.timeline {
  padding: 20px;
  h3 {
    margin-bottom: 15px;
    color: #333;
  }
  p {
    margin-bottom: 10px;
    color: #666;
  }
}
.milepost {
  padding-left: 20px;
}
</style>